<script type="text/html" template lay-done="layui.data.theme();">
    {{# 
      var local = layui.data(layui.setter.tableName);
      var theme = local.theme || {};
      var color = theme.color || {};
      var themeColorIndex =  parseInt((theme && theme.color) ? theme.color.index : 0) || 0;
    }}
  
    <div class="layui-card-header">
      <strong>主题设置</strong>
    </div>
    <div class="layui-card-body layadmin-setTheme">
      <h5><strong>配色方案</strong></h5>
      <ul class="layadmin-setTheme-color">
        {{# layui.each(layui.setter.theme.color, function(index, item){ }}
          <li layadmin-event="setTheme" data-index="{{ index }}" data-alias="{{ item.alias }}" 
          {{- index === themeColorIndex ? 'class="layui-this"' : '' }} title="{{ item.alias }}">
            <div class="layadmin-setTheme-header" style="background-color: {{ item.header }};"></div>
            <div class="layadmin-setTheme-side" style="background-color: {{ item.main }};">
              <div class="layadmin-setTheme-logo" style="background-color: {{ item.logo }};"></div>
            </div>
          </li>
        {{# }); }}
      </ul>
      <h5><strong>自定义配色</strong></h5>
      <ul class="layadmin-setTheme-custom">
        <li>主题色：<div class="set-custom-theme" data-name="main" lay-options="{color: '{{= color.main }}'}"></div></li>
        <li>选中色：<div class="set-custom-theme" data-name="selected" lay-options="{color: '{{= color.selected }}'}"></div></li>
        <li>LOGO 背景色：<div class="set-custom-theme" data-name="logo" lay-options="{color: '{{= color.logo }}'}"></div></li>
        <li>头部拦背景色：<div class="set-custom-theme" data-name="header" lay-options="{color: '{{= color.header }}'}"></div></li>
      </ul>
  </script>
  
  <script>
  layui.data.theme = function(){
    layui.use(['form', 'colorpicker'], function(){
      var form = layui.form
      var colorpicker = layui.colorpicker
      var admin = layui.admin;
  
      var local = layui.data(layui.setter.tableName);
      var theme = local.theme || {};
      var color = theme.color || {};
  
      colorpicker.render({
        elem: '.set-custom-theme',
        done: function(value){
          var elem = this.elem;
          var NAME = elem.data('name');
  
          color[NAME] = value;
          
          admin.theme({
            color: color
          });
        }
      });
      form.on('switch(system-theme-sideicon)', function(){
        admin.theme({
          hideSideIcon: this.checked
        })
      });
    });
  };
  </script>
  